 
<!-- 详情 -->
<template>
  <div class="detail">
    <div class="detail_title df jc-sb w100 ai-c">
      <div style="white-space: nowrap;padding-left: 20px;box-sizing:border-box;" class="df-c">
        <!--  v-if="system&& system.roles.includes('superadmin')" -->
        <lay-button size="sm" type="primary" v-if="system&& system.roles.includes('superadmin') && isEditFull == '1'" @click="edit_msg">{{ editBtn?'完成':'修改填写信息' }}</lay-button>

      </div>
      <h1>{{ '单料烟评吸详情' }}</h1><lay-button size="sm" @click="close">关闭</lay-button>
    </div>

    <div class="detail_content">
      <div v-if="dataKey.length>0">
        <div class="detail_tabs">
          <el-scrollbar style="width:  '100%' ;white-space: nowrap;background:'#fff' ">
            <ul class="df" style="height:45px;background-color: #fff;">
              <li v-for="(item, index) in dataKey2" :key="index" style="padding:0 6px;cursor: pointer;" class="df jcc ai-c" @click="tab_change(item.label,item.status)">
                <span
                  :style="{color:item.status=='1'?'#1e9fff':'red',padding:'8px 16px','border-bottom':`${tabCurrent==item.label?'2px solid ':''}`,'border-color':`${item.status=='1'?'#1e9fff':'red'}`}">{{item.label}}</span>
              </li>
            </ul>
          </el-scrollbar>
        </div>
        <!-- <lay-tab type="brief" v-model="tabCurrent" @change="tab_change">
          <lay-tab-item :title="item.label" :id="item.label" v-for="(item, index) in dataKey2" :key="index">

            <template #title>
              <div style="background-color: #fff;width: 100%;">
                <span v-if="item.status=='1'" :style="{color:'#1e9fff'}">{{item.label}}</span>
                <span v-else :style="{color:'red'}">{{item.label}}</span>

              </div>
            </template>
          </lay-tab-item>
        </lay-tab> -->

        <lay-scroll height="94%" style="" thumbColor="#f5f5f5">
          <lay-container>
            <!-- <el-scrollbar>
    <div class="scrollbar-flex-content">
      <p v-for="item in 50" :key="item" class="scrollbar-demo-item">
        {{ item }}
      </p>
    </div>
  </el-scrollbar> -->
            <el-scrollbar>
              <table>
                <thead>
                  <tr class="table-header">
                    <th align="center" rowspan="2">编号</th>
                    <th align="center" rowspan="2">年份、产地、等级</th>
                    <th align="center" colspan="3">香气指标</th>
                    <th align="center" colspan="3">烟气指标</th>
                    <th align="center" colspan="3">控制指标</th>
                    <th align="center" rowspan="2">总计</th>
                    <th align="center" rowspan="2">均值</th>
                    <th align="center" rowspan="2">燃烧性</th>
                    <th align="center" rowspan="2">灰色</th>
                    <th align="center" rowspan="2">突出特点</th>
                    <th align="center" rowspan="2">用途</th>
                    <th align="center" rowspan="2">备注</th>
                  </tr>
                  <tr class="table-header">

                    <th align="center">香型</th>
                    <th align="center">香气值</th>
                    <th align="center">香气量</th>
                    <th align="center">浓度</th>
                    <th align="center">柔细度</th>
                    <th align="center">余味</th>
                    <th align="center">杂气</th>
                    <th align="center">刺激性</th>
                    <th align="center">劲头</th>
                  </tr>
                </thead>
                <tbody>
                  <!-- <template v-for="item in tableData" :key="item.id">
                    <tr v-if="item.number === '标样'">
                      <td>{{ item.number }}</td>
                      <td>{{ item.smokeModel }}</td>
                      <td colspan="3">{{ item.smokeGloss }}</td>
                      <td colspan="3">{{ item.smokeAroma }}</td>
                      <td colspan="3">{{ item.smokeHarmony }}</td>
                      <td colspan="3">{{ item.smokeImpure }}</td>
                      <td colspan="3">{{ item.smokeThrill }}</td>
                      <td colspan="3">{{ item.smokeAftertaste }}</td>
                      <td colspan="3">{{ item.smokeTotal }}</td>
                    </tr>
                  </template> -->

                  <template v-for="item in tableData" :key="item.id">
                    <tr v-if="item.number !== '标样'">
                      <td>{{ item.number }}

                      </td>
                      <td>
                        <div style="white-space: nowrap;">{{ item.smokeName }} </div>
                      </td> 
                      <td>
                        <!-- {{ item.aromaFlavor }} -->
                        <el-input @blur="inp_blue(item,$event)" v-if="editBtn" v-model="item.aromaFlavor" size="small" style="width: 70px;"></el-input>
                        <div v-else>{{ item.aromaFlavor }}</div>
                      </td>
                      <td>
                        <!-- {{ is_NaN(item.aromaQuality) }} -->
                        <el-input @blur="inp_blue(item, 'aromaQuality')" v-if="editBtn" v-model="item.aromaQuality" size="small" style="width: 70px;"></el-input>
                        <div v-else>{{ is_NaN(item.aromaQuality) }}</div>
                      </td>
                      <td>
                        <el-input @blur="inp_blue(item, 'aromaVolume')" v-if="editBtn" v-model="item.aromaVolume" size="small" style="width: 70px;"></el-input>
                        <div v-else>{{ is_NaN(item.aromaVolume) }}</div>
                        <!-- {{ is_NaN(item.aromaVolume) }} -->
                      </td>
                      <td>
                        <el-input @blur="inp_blue(item, 'density')" v-if="editBtn" v-model="item.density" size="small" style="width: 70px;"></el-input>
                        <div v-else>{{ is_NaN(item.density) }}</div>
                        <!-- {{ is_NaN(item.density) }} -->
                      </td>
                      <td>
                        <el-input @blur="inp_blue(item,'fineness')" v-if="editBtn" v-model="item.fineness" size="small" style="width: 70px;"></el-input>
                        <div v-else>{{ is_NaN(item.fineness) }}</div>
                        <!-- {{ is_NaN(item.fineness) }} -->
                      </td>
                      <td>
                        <el-input @blur="inp_blue(item,'aftertaste')" v-if="editBtn" v-model="item.aftertaste" size="small" style="width: 70px;"></el-input>
                        <div v-else>{{ is_NaN(item.aftertaste) }}</div>
                        <!-- {{ is_NaN(item.aftertaste) }} -->
                      </td>
                      <!-- 杂气 -->
                      <td>
                        <el-input @blur="inp_blue(item,'impure')" v-if="editBtn" v-model="item.impure" size="small" style="width: 70px;"></el-input>
                        <div v-else>{{ is_NaN(item.impure) }}</div>
                        <!-- {{ is_NaN(item.impure) }} -->
                      </td>
                      <td>
                        <el-input @blur="inp_blue(item,'thrill')" v-if="editBtn" v-model="item.thrill" size="small" style="width: 70px;"></el-input>
                        <div v-else>{{ is_NaN(item.thrill) }}</div>
                        <!-- {{ is_NaN(item.thrill) }} -->
                      </td>
                      <td>
                        <el-input @blur="inp_blue(item,'energy')" v-if="editBtn" v-model="item.energy" size="small" style="width: 70px;"></el-input>
                        <div v-else>{{ item.energy }}</div>
                        <!-- {{ is_NaN(item.energy) }} -->
                      </td>
                      <!-- 总计 -->
                      <td>
                        <div>{{ is_NaN(item.total)|| '' }}</div>
                      </td>
                      <td>
                        <div>
                          <span v-if="item.workStatus=='1'">{{ getMean(item.smokeName)  }}</span>
                          <span v-else>-</span>
                        </div>
                      </td>
                      <td>
                        <el-input @blur="inp_blue(item,'combustibility')" v-if="editBtn" v-model="item.combustibility" size="small" style="width: 70px;"></el-input>
                        <div v-else>{{ item.combustibility }}</div>
                        <!-- {{ item.combustibility }} -->
                      </td>
                      <td>
                        <el-input @blur="inp_blue(item,'soot')" v-if="editBtn" v-model="item.soot" size="small" style="width: 70px;"></el-input>
                        <div v-else>{{ item.soot }}</div>
                        <!-- {{ item.soot }} -->
                      </td>
                      <td>
                        <el-input @blur="inp_blue(item,'characteristic')" v-if="editBtn" v-model="item.characteristic" size="small" style="width: 70px;"></el-input>
                        <div v-else>{{ item.characteristic }}</div>
                        <!-- {{ item.characteristic }} -->
                      </td>
                      <td>
                        <el-input @blur="inp_blue(item,'purpose')" v-if="editBtn" v-model="item.purpose" size="small" style="width: 70px;"></el-input>
                        <div v-else>{{ item.purpose }}</div>
                        <!-- {{ item.purpose }} -->
                      </td>
                      <td>
                        <el-input @blur="inp_blue(item,'remarks')" v-if="editBtn" v-model="item.remarks" size="small" style="width: 70px;"></el-input>
                        <div v-else>{{ item.remarks }}</div>
                        <!-- {{ item.remarks }} -->
                      </td>
                    </tr>

                  </template>
                </tbody>
              </table>

            </el-scrollbar>
          </lay-container>
        </lay-scroll>

      </div>

      <!-- <lay-table :columns="columns7" :data-source="tableData" :span-method="spanMethod7"></lay-table> -->

      <div v-else>
        <lay-empty description="暂无数据"></lay-empty>
      </div>
    </div>

  </div>
</template>
      
      <script setup lang="ts">
import http from "@/http";
import { onMounted, ref, onBeforeUnmount } from "vue";
import { useRouter, useRoute } from "vue-router";
import { useCounterStore } from "@/current";
import { storeToRefs } from "pinia"; // cnpm i pinia --save  2.1.3
import { layer } from "@layui/layer-vue";
const store = useCounterStore();
const { system } = storeToRefs(store); //  数据

const router = useRouter();
const route = useRoute();
const id = ref(route.query.id);
const meetingStatus = ref(route.query.status);

let oldList: Array<any> = []; //旧版数据

const columns7 = [
  {
    title: "编号",
    width: "80px",
    key: "id",
  },
  {
    title: "名称",
    width: "100px",
    key: "name",
  },
  {
    title: "性别",
    width: "100px",
    key: "sex",
  },
  {
    title: "年龄",
    width: "100px",
    key: "age",
  },
  {
    title: "城市",
    width: "100px",
    key: "city",
  },
  {
    title: "签名",
    width: "240px",
    key: "remark",
  },
];

const is_NaN = (num) => {
  let result: any = parseFloat(num);
  result = isNaN(result) ? "" : result.toFixed(1);

  return result;
};

const spanMethod7 = (row, column, rowIndex, columnIndex) => {};

// 实时刷新页面数据
const isStartInter = ref(false);
const timer = ref<any>(null);
onMounted(() => {
  get_list();

  startTimer();
});

const getMean = (e) => {
  console.log(info.value);

  let num = 0;
  let length = 0;
  Object.keys(info.value).forEach((item) => {
    console.log(info.value[item]);
    info.value[item].forEach((ele) => {
      if (ele.smokeName == e && ele.workStatus == "1") {
        num += ele.total;
        length += 1;
      }
    });
  });

  return (num / length).toFixed(1);
};

const startTimer = () => {
  if (meetingStatus.value == "2") {
    return false;
  }
  timer.value = setInterval(() => {
    isStartInter.value = true;
    get_list();
  }, 3000);
};

onBeforeUnmount(() => {
  clearInterval(timer.value);
});
// 选项卡绑定
const tabCurrent = ref("");
const isEditFull = ref("");
// 选项卡切换事件
const tab_change = (e, status) => {
  if(editBtn.value){
    layer.msg('修改状态不能切换',{icon:2})
    return false
  }
  console.log(e);
  tabCurrent.value = e;
  isEditFull.value = status;
  console.log(info.value);
  tableData.value = info.value[e];
  oldList = JSON.parse(JSON.stringify(info.value[e]));

  meanValue.value = 0;
  meanValueLength.value = 0;
  tableData.value.forEach((item) => {
    if (item.number != "标样") {
      meanValue.value += item.total;
      meanValueLength.value++;
    }
  });
};
const tableData = ref<any>([]);
const info = ref([]);
// key 值数组
const dataKey = ref<string[]>([]);
const dataKey2 = ref<string[]>([]);

// 均值
const meanValue = ref(0);
const meanValueLength = ref(0);
const get_list = async () => {
  // dataKey2.value = []
  const res = await http.corsApi(`/smokeMeeting/unblendedDetails/${id.value}`, "get", {});
  console.log(res);
  info.value = res.data;
  console.log(Object.keys(res.data));
  if (res.data) {
    dataKey.value = Object.keys(res.data);

    let arr2: any = [];
    dataKey.value.forEach((item) => {
      arr2.push({ label: item, status: res.data[item][0].workStatus || 0 });
    });
    dataKey2.value = arr2;

    if (!isStartInter.value || tabCurrent.value == "") {
      tabCurrent.value = dataKey.value[0];
      isEditFull.value = dataKey2.value[0].status;
    }

    tableData.value = res.data[tabCurrent.value];
    meanValue.value = 0;
    meanValueLength.value = 0;
    tableData.value.forEach((item) => {
      console.log(item.total);
      if (item.number != "标样") {
        meanValue.value += item.total;
        meanValueLength.value++;
      }
    });
    oldList = JSON.parse(JSON.stringify(res.data[tabCurrent.value]));
  }

  console.log(dataKey.value);
  console.log(dataKey2.value);
  console.log(tableData.value);
};

// 修改填写信息
const editBtn = ref(false);
const edit_msg = () => {
  editBtn.value = !editBtn.value;

  if (editBtn.value) {
    clearInterval(timer.value);
  } else {
    startTimer();
  }
};
const dicts: Array<any> = [
  { title: "香型", key: "aromaFlavor" },
  // { key:'aromaQuality', title:'香气质', weight:2.4, require: true, len: 0.5, area: [0,9] },
  { key: "aromaQuality", title: "香气质", weight: 2.4, require: true, len: 0.5, area: [0, 9] },
  { key: "aromaVolume", title: "香气量", weight: 2.4, require: true, len: 0.5, area: [0, 9] },
  { key: "density", title: "浓度", weight: 1.6, require: true, len: 0.5, area: [0, 9] },
  { key: "aftertaste", title: "余味", weight: 1.6, require: true, len: 0.5, area: [0, 9] },
  { key: "fineness", title: "柔细度", weight: 1, require: true, len: 0.5, area: [0, 9] },
  { key: "impure", title: "杂气", weight: 1, require: true, len: 0.5, area: [0, 9] },
  { key: "thrill", title: "刺激性", weight: 1, require: true, len: 0.5, area: [0, 9] },
  { key: "energy", title: "劲头", require: true },
  { key: "combustibility", title: "燃烧性", require: true },
  { key: "soot", title: "灰色", require: true },
];
// input失去焦点时间
const inp_blue = async (item: any, key: string) => {
  console.log(item, key);
  let loop = false;
  let tipText = "字段值不能为空";
  let a = dicts.find((ele) => {
    return ele.key == key;
  });
  if (a) {
    let value = item[key];
    if (a.len) {
      value = (value || 0) * 1;
    }
    if (a.require && !value) {
      tipText = `${a.title}字段值不能为空`;
      loop = true;
    }
    let len = (a.len || 0) * 10;
    if (len != 0 && (value * 10) % len != 0) {
      tipText = `${a.title} 范围为${a.area[0]} ~ ${a.area[1]},步长为${a.len}`;
      loop = true;
    }

    if (a.area && (value < a.area[0] || value > a.area[1])) {
      tipText = `${a.title}范围为${a.area[0]} ~ ${a.area[1]},步长为${a.len}`;
      loop = true;
    }
  }
  console.log(loop);

  if (loop) {
    let old = oldList.find((ele) => {
      return ele.id == item.id;
    });
    if (old) {
      item[key] = old[key];
    }
    item.total = getTotal(item);
    console.log(item.total);

    return layer.msg(tipText, { icon: 2, time: 1500 });
  } else {
    item.total = getTotal(item);
  }

  const res = await http.corsApi("/smokeMeeting/unblended", "put", { ...item });
  console.log(res);
  if (res.data) {
    layer.msg("修改成功", { icon: 1, time: 1500 });
  }

  await get_list();
};

function getTotal(form: any) {
  let total = 0;
  dicts.forEach((ele) => {
    if (ele.weight) {
      let value = (form[ele.key] || 0) * 1;
      total += value;
    }
  });
  return total.toFixed(1);
}

// 关闭
const close = () => {
  router.go(-1);
  //   router.push("/smokePanel/metting");
};
</script>
      
    <style scoped lang="scss">
.detail {
  width: 100%;
  height: calc(100% - 42px);
  display: flex;
  flex-direction: column;
  &_title {
    width: 100%;
    padding: 15px 15px 20px 0;
    box-sizing: border-box;
    background-color: #fff;
    h1 {
      font-size: 20px;
    }
  }
  &_content {
    width: 100%;
    height: calc(100% - 120px);
    > div {
      width: 90%;
      margin: 15px auto 0px;
      height: 100%;
      // background-color: #fff;
      table {
        width: 100%;
        text-align: center;
        background-color: #fff;
        th {
          padding: 8px;
          box-sizing: border-box;
          border: 1px solid #ccc;
        }
        tr {
          td {
            padding: 8px;
            box-sizing: border-box;
            border: 1px solid #ccc;
          }
        }
      }
    }
  }
}

.layui-container {
  padding: 0;
}

.layui-tab {
  margin: 0;
  background-color: #fff;
  :deep(.layui-tab-content) {
    display: none;
  }

  :deep(.layui-tab-title) {
    height: 40px;
    .layui-this {
      // background-color: #b8ddff;
    }
  }
  :deep(.layui-tab-title li) {
    line-height: 40px;
    padding: 0 15px;
    border-bottom: 0 none;
  }
}

.dot {
  display: inline-block;
  background-color: whitesmoke;
  margin-right: 8px;
  border-radius: 50px;
  height: 8px;
  width: 8px;
}
.dot-this {
  background-color: var(--global-primary-color) !important;
}

:deep(.el-scrollbar) {
  background: #fff;
}
</style>  